<template>
  <div class="index_page">
    <y-header />
    <div id="center">
      <div id="content" class="content">
        <div class="page-container" style="min-height: 960px;">
          <div class="menu" style="height: 609px;">
            <h1 class="menu-title">开始开发</h1>
            <ul class="clearfix">
              <li data-id="1" class="single" :class="{on: currentPage == 'flows'}" @click="changePage('flows')">接入流程简介</li>
              <li data-id="2" class="single" :class="{on: currentPage == 'address'}" @click="changePage('address')">接口地址</li>
              <li data-id="4" class="single" :class="{on: currentPage == 'ticket'}" @click="changePage('ticket')"><span>如何获取ticket</span></li>
              <li data-id="5" class="single multi" :class="{on: currentPage == 'getAccessToken'}" @click="changePage('getAccessToken')"><span>获取用户信息和access_token</span></li>
              <li data-id="6" class="single" :class="{on: currentPage == 'uploadScore'}" @click="changePage('uploadScore')"><span>实验结果数据回传接口</span></li>
              <li data-id="6" class="single" :class="{on: currentPage == 'uploadAttachment'}" @click="changePage('uploadAttachment')"><span>实验报告上传接口</span></li>
              <li data-id="9" class="single multi" :class="{on: currentPage == 'refreshAccessToken'}" @click="changePage('refreshAccessToken')"><span>重新获取access_token</span></li>
              <li data-id="11" class="single" :class="{on: currentPage == 'tools'}" @click="changePage('tools')"><span>接口在线调试工具</span></li>
            </ul>
          </div>
          <Start v-if="currentPage == 'address'" />
          <flows v-if="currentPage == 'flows'" />
          <ticket v-if="currentPage == 'ticket'" />
          <get-access-token v-if="currentPage == 'getAccessToken'" />
          <upload-score v-if="currentPage == 'uploadScore'" />
          <upload-attachment v-if="currentPage == 'uploadAttachment'" />
          <refresh-access-token v-if="currentPage == 'refreshAccessToken'" />
          <tools v-if="currentPage == 'tools'" />
          <a href="javascript:;" class="openMenu"><i class="iconfont"></i></a></div>
      </div>
    </div>
    <!-- <bottom /> -->
    <y-tap />
  </div>
</template>
<script>
import YHeader from '@/components/common/Header.vue'
import YTap from '@/components/common/Top.vue'
import Start from './address.vue'
import Flows from './flows.vue'
import GetAccessToken from './getAccessToken.vue'
import RefreshAccessToken from './refreshAccessToken.vue'
import UploadScore from './uploadScore.vue'
import UploadAttachment from './uploadAttachment.vue'
import Ticket from './ticket.vue'
import Tools from './tools.vue'
import 'assets/css/index.css'
import 'assets/css/wiki.css'
import 'assets/css/form.css'
// import Bottom from '@/components/common/Bottom'

export default {
  components: {
    // Bottom,
    GetAccessToken,
    RefreshAccessToken,
    Start,
    Flows,
    UploadScore,
    UploadAttachment,
    Ticket,
    Tools,
    YHeader,
    YTap
  },
  data() {
    return {
      currentPage: 'flows'
      // categoryId: '', // 当前分类ID
    }
  },
  methods: {
    changePage(currentPage) {
      this.currentPage = currentPage
      // document.querySelector(".menu .on").classList.remove("on")
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.content {
  background-color: #ffffff;
}
</style>
